/* eslint-disable prettier/prettier */

import { useState } from 'react'
import { Modal, Image, Carousel } from 'antd'
import icon from '../../../../build/icon.png'
import GlobalContext from './GlobalContext.jsx'
import '../assets/about.css'

function About() {
  const [open, setOpen] = useState(false)

  const { ht, tfs, cfs } = window.api.about.ps()

  return (
    <GlobalContext.Consumer>
      {(ctx) => {
        return (
          <div style={{ marginTop: '20px' }}>
            <div
              style={{
                backgroundColor: '#31333c',
                borderRadius: '10px',
                opacity: '0.8'
              }}
            >
              <div
                style={{
                  backgroundColor: '#1e2f57',
                  height: '30px',
                  borderTopLeftRadius: '10px',
                  borderTopRightRadius: '10px'
                }}
              ></div>
              <div
                style={{
                  color: '#000',
                  padding: '30px',
                  display: 'flex',
                  justifyContent: 'space-between'
                }}
              >
                <div
                  style={{
                    flex: '6',
                    color: '#b9c4d1'
                  }}
                >
                  <div>
                    <span className="span-width">{ctx.t('appName')}</span>
                    <span>WSL Assistant</span>
                  </div>
                  <div>
                    <span className="span-width">{ctx.t('appVersion')}</span>
                    <span>1.0</span>
                  </div>
                  {/* <div>发行时间：2025年4月24日</div>  */}
                  <div>
                    <span className="span-width">{ctx.t('author')}</span>
                    <span>Simon Guo</span>
                  </div>
                  <div>
                    <span className="span-width">{ctx.t('email')}</span>
                    <span>msappaccount@163.com</span>
                  </div>
                  <div>
                    <span className="span-width">{ctx.t('copyRight')}</span>
                    <span>{ctx.t('comName')}</span>
                  </div>
                </div>
                <div
                  style={{
                    flex: '4',
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center'
                  }}
                >
                  <div
                    style={{
                      width: '120px',
                      textAlign: 'center',
                      marginRight: '30px'
                    }}
                  >
                    <Image
                      style={{
                        width: '100%',
                        height: '100%'
                      }}
                      preview={false}
                      src={icon}
                    />
                  </div>
                  <div
                    style={{
                      width: '60px',
                      lineHeight: '60px',
                      textAlign: 'center',
                      borderRadius: '50%',
                      backgroundColor: 'lightgrey',
                      cursor: 'pointer'
                    }}
                    onMouseOver={(e) => {
                      const style = e.target.style
                      style.backgroundColor = 'green'
                      style.color = 'white'
                    }}
                    onMouseOut={(e) => {
                      const style = e.target.style
                      style.backgroundColor = 'lightgrey'
                      style.color = 'black'
                    }}
                    onClick={() => setOpen(true)}
                  >
                    {ctx.t('donate')}
                  </div>
                </div>
              </div>
            </div>
            {/* some words */}
            <div style={{
              width: '100%',
              backgroundColor: '#31333c',
              color: '#b9c4d1',
              borderRadius: '10px',
              marginTop: '10px',
              textIndent: '2em',
              padding: '20px',
              fontSize: '14px',
              opacity: '0.8'
            }}>
              {
                ctx.t('aimTo')
              }
              <span
                style={{
                  cursor: 'pointer',
                  color: 'yellow'
                }}
                onClick={(e) => window.api.common.openBrowser(e, 'https://aka.ms/wslinstall')}
              >
                https://aka.ms/wslinstall
              </span>
              {ctx.t('period')}
            </div>
            {/* 快递广告 */}
            <div style={{
              width: '100%',
              color: '#b9c4d1',
              borderRadius: '10px',
              marginTop: '5px',
              padding: '5px',
              fontSize: '14px',
              display: 'flex',
              flexDirection: 'row',
              justifyContent: 'space-between'
            }}>
              {/* 轮播图 */}
              <div style={{
                width: '300px',
                height: ht,
                backgroundColor: 'lightgrey',
              }}>
                <Carousel autoplay={true}>
                  <div>
                    <Image src="https://mete.team/prod-api/profile/upload/2024/09/28/%E4%B8%80%E4%BB%B7%E5%88%B0%E5%BA%95_20240928103713A002.png"
                           preview={true}
                           placeholder={true}
                           style={{
                             width: '300px',
                             height: ht
                           }}/>
                  </div>
                  <div>
                    <Image src="https://mete.team/prod-api/profile/upload/2024/09/21/banner%E5%88%86%E4%BA%AB%E5%A5%BD%E5%8F%8B_20240921110941A002.png"
                           preview={true}
                           placeholder={true}
                           style={{
                             width: '300px',
                             height: ht
                           }}/>
                  </div>
                </Carousel>
              </div>
              {/* 文字说明 */}
              <div style={{
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-around',
                alignItems: 'center',
              }}>
                <div style={{
                  textAlign: 'center',
                  fontSize: tfs,
                  fontWeight: 'bold',
                }}>拓雨驿站</div>
                <div style={{fontSize: cfs,color: '#b9c4d1'}}>在线下单寄件，免费上门取件!</div>
                <div style={{fontSize: cfs,color: '#b9c4d1'}}>方便快捷。省心省事！</div>
                <div style={{fontSize: cfs,color: '#b9c4d1'}}>打开微信，扫描右侧小程序码！</div>
                <div style={{fontSize: cfs,color: '#b9c4d1'}}>赶紧体验吧！(仅中国大陆使用)</div>
              </div>
              {/* 小程序二维码 */}
              <div>
                <Image src={window.api.about.get2()}
                       preview={true}
                       placeholder={true}
                       style={{
                         width: ht,
                         height: ht
                       }}/>
              </div>
            </div>
            {/* 捐助对话框 */}
            <Modal
              title={<p>{ctx.t('donate')}</p>}
              footer={<></>}
              open={open}
              onCancel={() => setOpen(false)}
            >
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  flexDirection: 'column',
                  alignItems: 'center'
                }}
              >
                <Image src={window.api.about.get()} preview={false} placeholder={true} style={{
                  width: '200px',
                  height: '200px'
                }}/>
                <p
                  style={{
                    marginTop: '20px',
                    textAlign: 'center'
                  }}
                >
                  {ctx.t('donateTip')}
                </p>
              </div>
            </Modal>
          </div>
        )
      }}
    </GlobalContext.Consumer>
  )
}

export default About
